<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>涛宝商城-订单信息</title>
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/mdui.min.css}" />
<script th:src="@{appstyle/js/mdui.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:src="@{appstyle/js/jquery-3.3.1.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/core.css}" />
</head>
<body>
	<div id="header">
		<p class="p1">涛宝商城,只有想不到,没有买不到!!!</p>
	</div>
	<div id="header_1">
		<div class="login">
			<div class="login_1">
				<span class="span"> <a href="Land.html"
					th:if="${session.currentUser==null}">登录</a> 
					<div class="mdui-container"
						style="display: inline-block; position: absolute; top: -5px"
						th:if="${session.currentUser!=null}">
						<div class="mdui-chip">
							<img class="mdui-chip-icon"
								th:src="@{${session?.currentUser?.headpic}}" /> <span
								class="mdui-chip-title"
								th:text="${session?.currentUser?.username}"></span> <span
								class="mdui-chip-title"><i
								class="mdui-icon material-icons"
								mdui-tooltip="{content: '安全退出'}" onclick="clickLogout()">&#xe5cd;</i></span>
						</div>
					</div> <a href="register.html" th:if="${session.currentUser==null}">注册</a>
				</span>
				<ul class="ul1">
					<li class="li1"><a href="Shopping_Cart.html" class="a1">购物车(<span
							class="number">0</span>)
					</a></li>
					<li class="li1"><a href="orderMsg.html" class="a1">我的订单</a></li>
					<li class="li1"><a href="userMsg.html" class="a1">我的涛宝</a></li>
					<li class="li1"><a href="taobaostoreMsg.html" class="a1">关于涛宝</a></li>
				</ul>
			</div>
		</div>
	</div>
		<script type="text/javascript">
		clickLogout = function() {
			$.ajax({
				url : "user/logout.do",
				Type : "post",
				dataType : "json",
				success : function(data) {
					mdui.snackbar({
					    message: '成功安全退出!',
					    position: 'top',
					    timeout:300,
					    onClosed:function(){
					    	location.href="index.html";
					    }
				   });
				}
			})
		}
	</script>
	<div id="body">
		<a class="logo" href="index.html">涛宝商城</a>
		<div id="body-1">
				<input id="serach_Input" class="textinput" type="text" placeholder=请输入商品名称 /> <input id="serach_Btn" type="button" class="button1" value="搜索	" />
			</div>
	</div>
	<script type="text/javascript">
	$("#serach_Btn").click(function(){
		location.href="product/toSerachPage.do?keyword="+$("#serach_Input").val();
	})
	</script>
	<hr />
	<div id="daohanglan">
		<span class="daohanglan_1"> <a href="" class="a3">涛宝商城</a><span
			class="fuhao"> ></span> <a href="" class="a3">我的订单</a>
		</span>
	</div>

	<div id="left">
		<ul style="">
			<li><a href="userMsg.html">个人中心</a></li>
			<li><a href="orderMsg.html">我的订单</a></li>
			<li><a href="retrievePwd.html">修改密码</a></li>
			<li><a href="taobaostoreMsg.html">关于涛宝</a></li>
		</ul>
	</div>
	<div id="rightPanel"
		style="background: #FFFFFF; width: 950px; height: 100%; position: absolute; right: 300px; top: 280px;">
		<h2
			style="font-weight: 100; font-size: 16px; position: relative; left: 20px;">我的订单</h2>
		<hr>
		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>商品信息</th>
				<th>单价</th>
				<th>数量</th>
				<th>合计</th>
			</tr>
		</table>
		<!-- 订单列表 -->
		<table border="" cellspacing="" cellpadding="" id="order_table">
		</table>
		<script type="text/javascript">
		initOrderMsg();
		
		deleteOrderMsg=function(orderOn){
			mdui.confirm('确定取消订单吗?',
			function(){
				$.ajax({
					url:"order/cancel.do",
					Type:"post",
					data:"orderOn="+orderOn,
					dataType:"json",
					success:function(data){
						window.location.href='orderMsg.html';
					}
				})
			},
		  );
		}
		
		function initOrderMsg(){
			$.ajax({
				url:"order/list.do",
				Type:"post",
				dataType:"json",
				success:function(data){
				    $("#order_table").empty();
				    var ordercount = 0;
					for(var i=0;i<data.data.length;i++){
						var obj = data.data[i];
						if(obj.status != 0){
							ordercount++;
							var statusName = "未付款<a href='orderPay.html?orderNo="+obj.orderNo+"'>(支付订单)</a>";
							if(obj.status==20){
								statusName = "已付款<a href='#'>(提醒商家发货)</a>";
							}else if(obj.status==40){
								statusName = "已发货<a href='#'>(查看物流)</a>";
							}else if(obj.status==50){
								statusName = "交易成功";
							}else if(obj.status==60){
								statusName = "交易关闭";
							}
							$("#order_table").append("<tr><th>订单号： "+obj.orderNo+"<span style='color:red;cursor:pointer' onclick='deleteOrderMsg("+obj.orderNo+")'>(取消订单)</span></th><th>收件人："+obj.receiverVo.receiverName+"</th><th>订单状态："+statusName+"</th><th>订单总价： ￥"+obj.payment+"</th></tr>");
							for(var j=0;j<obj.listOrderItemVo.length;j++){
								var orderItem = obj.listOrderItemVo[j];
								$("#order_table").append("<tr><td><img src='"+orderItem.productImage+"' width='100px' height='100px'><a style='position: relative;bottom: 40px'>商品信息:"+orderItem.productName+"</a></td><td>"+orderItem.currentUnitPrice+"</td><td>"+orderItem.quantity+"</td><td>"+orderItem.totalPrice+"</td></tr>");
							}	
						}
					}
					if(ordercount == 0){
						$("#order_table").append("<tr><th><h1>还没有购物哦,快去下单吧!!!<a href='index.html'>点击购物</a></h1></th></tr>");
					}
				}
			})
		}
		</script>
	</div>
	<script>
		 $("#updateBtn").click(function(){
			 window.location.href="userMsg_Update.html";
		 })
		</script>
	<style type="text/css">
#left li {
	margin-top: 10px;
}

#left li a {
	position: relative;
	left: 300px;
	color: #A9A9A9;
	font-size: 14px;
	text-decoration: none;
}

.li1 a:hover {
	color: #66CCFF;
}

#rightPanel div {
	position: relative;
	left: 20px;
	margin-top: 15px;
	font-size: 14px;
	color: #666666;
}
</style>
</body>
</html>
